<template>
  <div>
    <el-row class="top">
      <el-form label-position="left" label-width="100px">
        <el-col :span="8">
          <el-form-item label="线路编号:">
            <el-input v-model="form.number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="线路名称:">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="起始机构:">
            <el-form-item label="所属营业部:">
              <el-cascader
                v-model="form.startAgencyName"
                :options="tree"
                :props="props"
                @change="change1"
                :filterable="true"
                placeholder="请选择所属营业部"
              ></el-cascader>
            </el-form-item>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地机构:">
            <el-form-item label="所属营业部:">
              <el-cascader
                v-model="form.startAgencyName"
                :options="tree"
                :props="props"
                @change="change2"
                :filterable="true"
                placeholder="请选择所属营业部"
              ></el-cascader>
            </el-form-item>
          </el-form-item>
        </el-col>
        <el-button type="warning" @click="search">搜索</el-button>
        <el-button type="danger" @click="reset">重置</el-button>
      </el-form>
    </el-row>
    <div class="content">
      <el-button type="danger" @click="addShow">新增路线</el-button>
      <el-button type="danger" @click="costShow">成本设置</el-button>
      <el-table
        :data="tableData"
        style="width: 100%; font-size: 12px"
        @expand-change="unfold"
      >
        <el-table-column type="expand">
          <template #default="{}">
            <el-table
              :data="childrenData"
              style="width: 80%; margin-left: 100px"
            >
              <el-table-column fixed prop="name" label="车次名称">
              </el-table-column>
              <el-table-column prop="arriveTime" label="发车频次">
              </el-table-column>
              <el-table-column prop="departureTime" label="到达时间">
              </el-table-column>
              <el-table-column
                prop="truckDrivers[0].truck.licensePlate"
                label="车辆安排"
              >
              </el-table-column>
              <el-table-column prop="drivers" label="司机安排">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template #default="{ row }">
                  <el-button type="text" size="small" @click="editcatShow(row)"
                    >编辑车辆</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="delttetransport(row.id)"
                    >删除车辆</el-button
                  >
                  <el-button type="text" size="small">安排车辆</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="线路编号"> </el-table-column>
        <el-table-column prop="name" label="线路名称"> </el-table-column>
        <el-table-column prop="type" label="线路类型" :formatter="formatter">
        </el-table-column>
        <el-table-column prop="startOrganName" label="起始地机构">
        </el-table-column>
        <el-table-column prop="endOrganName" label="目的地机构">
        </el-table-column>
        <el-table-column prop="distance" label="距离（千米）">
        </el-table-column>
        <el-table-column prop="cost" label="成本（元）"> </el-table-column>
        <el-table-column prop="time" label="预计时间（分钟）">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editShow(row.id)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="deleteLine(row.id)"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="addcarshow(row)"
              >增加车次</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="成本设置"
      :visible.sync="costdialog"
      width="40%"
      @close="costClose"
    >
      <el-form label-position="left" label-width="80px">
        <el-form-item label="线路类型">
          <span>每公里平均成本（元）</span>
        </el-form-item>
        <el-form-item
          :label="item.transportLineType"
          v-for="(item, index) in costList"
          :key="index"
        >
          <el-input v-model="item.cost"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="新增线路"
      :visible.sync="adddialog"
      width="40%"
      @close="addClose"
    >
      <el-form label-position="left" label-width="100px">
        <el-form-item label="线路编号">
          <el-input v-model="addform.id"></el-input>
        </el-form-item>
        <el-form-item label="线路名称">
          <el-input v-model="addform.name"></el-input>
        </el-form-item>
        <el-form-item label="线路类型">
          <el-select v-model="addform.type" placeholder="请选择">
            <el-option
              v-for="item in pathoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始地机构">
          <el-form-item label="所属营业部:">
            <el-cascader
              v-model="form.startAgencyName"
              :options="tree"
              :props="props"
              @change="change1"
              :filterable="true"
              placeholder="请选择所属营业部"
            ></el-cascader>
          </el-form-item>
        </el-form-item>
        <el-form-item label="目的地机构">
          <el-form-item label="所属营业部:">
            <el-cascader
              v-model="form.startAgencyName"
              :options="tree"
              :props="props"
              @change="change2"
              :filterable="true"
              placeholder="请选择所属营业部"
            ></el-cascader>
          </el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="addPath">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑线路"
      :visible.sync="editdialog"
      width="40%"
      @close="editClose"
    >
      <el-form label-position="left" label-width="100px">
        <el-form-item label="线路编号">
          <el-input v-model="editform.id"></el-input>
        </el-form-item>
        <el-form-item label="线路名称">
          <el-input v-model="editform.name"></el-input>
        </el-form-item>
        <el-form-item label="线路类型">
          <el-select v-model="editform.type" placeholder="请选择">
            <el-option
              v-for="item in pathoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始地机构">
          <el-form-item label="所属营业部:">
            <el-cascader
              v-model="form.startAgencyName"
              :options="tree"
              :props="props"
              @change="change1"
              :filterable="true"
              placeholder="请选择所属营业部"
            ></el-cascader>
          </el-form-item>
        </el-form-item>
        <el-form-item label="目的地机构">
          <el-form-item label="所属营业部:">
            <el-cascader
              v-model="form.startAgencyName"
              :options="tree"
              :props="props"
              @change="change2"
              :filterable="true"
              placeholder="请选择所属营业部"
            ></el-cascader>
          </el-form-item>
        </el-form-item>
        <el-form-item label="距离">
          <el-input v-model="editform.distance"></el-input>
        </el-form-item>
        <el-form-item label="成本">
          <el-input v-model="editform.cost"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="editpath">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加车次"
      :visible.sync="addcardialog"
      width="40%"
      @close="addcarClose"
    >
      <el-form label-position="left" label-width="100px">
        <el-form-item label="线路名称">
          <el-input v-model="addcarform.pathname"></el-input>
        </el-form-item>
        <el-form-item label="车次名称">
          <el-input v-model="addcarform.name"></el-input>
        </el-form-item>
        <el-form-item label="发车时间">
          <el-input v-model="addcarform.departureTime"></el-input>
        </el-form-item>
        <el-form-item label="持续时间">
          <el-input v-model="addcarform.estimatedTime"></el-input>
        </el-form-item>
        <el-form-item label="发车周期">
          <el-select v-model="addcarform.period" placeholder="请选择">
            <el-option
              v-for="item in period"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="addcar">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑车次"
      :visible.sync="editcardialog"
      width="40%"
      @close="editcarClose"
    >
      <el-form label-position="left" label-width="100px">
        <el-form-item label="线路名称">
          <el-input v-model="editcarform.pathname"></el-input>
        </el-form-item>
        <el-form-item label="车次名称">
          <el-input v-model="editcarform.name"></el-input>
        </el-form-item>
        <el-form-item label="发车时间">
          <el-time-picker
            v-model="editcarform.departureTime"
            placeholder="任意时间点"
            format="HH:mm:ss"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="持续时间">
          <el-input v-model="editcarform.estimatedTime"></el-input>
        </el-form-item>
        <el-form-item label="发车周期">
          <el-select v-model="editcarform.period" placeholder="请选择">
            <el-option
              v-for="item in period"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="editcar">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { gettreeApi } from "@/api/register";
import {
  gettransportLinePageApi,
  getcostApi,
  gettransportLineTripsApi,
  posttransportLineApi,
  gettransportLineApi,
  puttransportLineApi,
  deleteLineApi,
  posttransportLineTripsApi,
  gettransportLineInfoApi,
  delttetransportApi,
} from "@/api/lien-manange";
export default {
  name: "line-manage",
  data() {
    return {
      tableData: [{}],
      form: {
        page: 1,
        pageSize: 10,
        name: "",
        number: "",
        endOrganId: null,
        startOrganId: null,
      },
      total: 0,
      costdialog: false,
      costList: [],
      adddialog: false,
      addform: {
        id: "XL",
        name: "",
        type: "",
      },
      childrenData: [{}],
      pathoptions: [
        {
          label: "干线",
          value: 1,
        },
        {
          label: "支线",
          value: 2,
        },
        {
          label: "接驳",
          value: 3,
        },
      ],
      editdialog: false,
      editform: {},
      addcarform: {
        period: "",
        estimatedTime: "",
        departureTime: "",
        transportLineId: "",
      },
      addcardialog: false,
      period: [
        {
          label: "天",
          value: 1,
        },
        {
          label: "周",
          value: 2,
        },
        {
          label: "月",
          value: 3,
        },
      ],
      editcardialog: false,
      editcarform: {
        pathname: "",
        period: "",
        estimatedTime: "",
        departureTime: "",
        transportLineId: "",
      },
      tree: [],
      props: {
        expandTrigger: "hover",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
    };
  },
  created() {
    this.gettransportLinePage(this.form);
    this.getcost();
    this.getcount();
  },
  methods: {
    change2(a) {
      this.form.startAgencyName = "";
      this.form.endOrganId = a[a.length - 1] || [];
    },
    change1(a) {
      // console.log(a);
      this.form.startAgencyName = "";
      this.form.startOrganId = a[a.length - 1] || [];
    },
    async getcount() {
      const res = await gettreeApi(this.form);
      console.log(JSON.parse(res.data));
      this.tree = JSON.parse(res.data);
    },
    async gettransportLinePage(obj) {
      const res = await gettransportLinePageApi(obj);
      this.total = +res.data.counts;
      this.tableData = res.data.items;
    },
    handleCurrentChange(num) {
      this.form.page = num;
      this.gettransportLinePage(this.form);
    },
    formatter(a, b, c) {
      if (c === 1) {
        return "干线";
      } else if (c === 2) {
        return "支线";
      } else {
        return "接驳路线";
      }
    },
    search() {
      this.gettransportLinePage({
        ...this.form,
      });
    },
    reset() {
      this.form = {
        page: 1,
        pageSize: 10,
        name: "",
        number: "",
      };
      this.gettransportLinePage(this.form);
    },
    //成本弹窗
    costClose() {},
    costShow() {
      this.costdialog = true;
    },
    async getcost() {
      const res = await getcostApi();
      res.data.forEach((item) => {
        if (item.transportLineType === 3) {
          item.transportLineType = "接驳";
        } else if (item.transportLineType === 2) {
          item.transportLineType = "支线";
        } else {
          item.transportLineType = "干线";
        }
      });
      this.costList = res.data;
    },
    addShow() {
      this.adddialog = true;
    },
    addClose() {
      this.adddialog = false;
    },
    //展开
    async unfold(row, a) {
      if (a.length) {
        const res = await gettransportLineTripsApi({
          transportLineId: row.id,
        });
        res.data.forEach((item) => {
          item.arriveTime = this.secondToTimeStr(item.arriveTime);
          item.departureTime = this.secondToTimeStr(item.departureTime);
          if (item.truckDrivers) {
            item.drivers = "";
            item.truckDrivers.forEach((item1) => {
              item.drivers = item?.drivers + "  " + item1.driver.name;
            });
          }
        });
        console.log(res);
        this.childrenData = res.data;
      }
    },
    secondToTimeStr(t) {
      if (!t) return;
      if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
      if (t < 3600)
        return (
          "" +
          ((a = parseInt(t / 60)) < 10 ? "0" + a : a) +
          ":" +
          ((i = t % 60) < 10 ? "0" + i : i)
        );
      if (3600 <= t) {
        var a,
          i,
          e = parseInt(t / 3600);
        return (
          (e < 10 ? "0" + e : e) +
          ":" +
          ((a = parseInt((t % 3600) / 60)) < 10 ? "0" + a : a) +
          ":" +
          ((i = t % 60) < 10 ? "0" + i : i)
        );
      }
    },
    //添加路线
    async addPath() {
      const res = await posttransportLineApi({
        ...this.addform,
        ...this.form.startOrganId,
        ...this.form.endOrganId,
      });
      this.$message.success(res.msg);
    },
    editClose() {},
    async editShow(id) {
      this.editdialog = true;
      const res = await gettransportLineApi(id);
      this.editform = res.data;
      this.form.startOrganId = res.data.startOrganId;
      this.form.endOrganId = res.data.endOrganId;
    },
    //编辑路线
    async editpath() {
      await puttransportLineApi(this.editform);
      this.$message.success("修改成功");
      this.gettransportLinePage(this.form);
      this.editdialog = false;
    },
    //删除路线
    async deleteLine(id) {
      await this.$confirm("确认删除吗");
      const res = await deleteLineApi(id);
      console.log(res);
      this.$message.success("删除成功");
      this.gettransportLinePage(this.form);
    },
    addcarClose() {
      this.addcardialog = false;
    },
    async addcarshow(row) {
      this.addcarform.pathname = row.name;
      this.addcarform.transportLineId = row.id;
      this.addcardialog = true;
    },
    async addcar() {
      const res = await posttransportLineTripsApi(this.addcarform);
      console.log(res);
      this.$message.success("添加成功");
      this.addcarClose();
      this.gettransportLinePage(this.form);
    },
    editcarClose() {},
    async editcatShow(row) {
      console.log(row);
      const res = await gettransportLineInfoApi(row.id);
      console.log(res);
      this.editcarform = res.data;
      this.editcarform.pathname = row.transportLine.name;
      this.editcardialog = true;
    },
    editcar() {
      console.log(this.editcarform);
    },
    async delttetransport(id) {
      await this.$confirm("确认删除吗");
      await delttetransportApi(id);
      this.$message.success("删除成功");
      this.gettransportLinePage(this.form);
    },
    dateTonum(time) {
      var s = "";
      var hour = time.split(":")[0];
      var min = time.split(":")[1];
      var sec = time.split(":")[2];
      s = Number(hour * 60) + Number(min * 1) + Number(sec);
      return s;
    },
    newDate(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 140px;
  background-color: #fff;
  padding: 20px;
  .el-col.el-col-8 {
    padding: 0 20px;
  }
}
.content {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}
</style>